.login-box {
    position       : absolute;
    width          : 100%;
    height         : 100%;
    top            : 0;
    left           : 0;
    display        : flex;
    justify-content: center;
    align-items    : center;


    form {
        display            : flex;
        flex-direction     : column;
        justify-content    : center;
        align-items        : center;
        width              : 500px;
        // height          : 300px;
        padding            : 16px;
        border-radius      : var(--border-radius);
        background-color   : rgba(255, 255, 255, 0.3);
        box-shadow         : 1px 1px 12px 2px rgba(0, 0, 0, 0.2);
        transition         : .6s;

        &:hover {
            box-shadow      : 1px 1px 12px 2px rgba(0, 0, 0, 0.5);
            background-color: rgba(255, 255, 255, 0.4);
        }

        .input-item {
            width        : 80%;
            margin-bottom: 26px;

            * {
                width: 100%;
            }

            &:first-child {
                margin-top: 10px;
            }

            .label {
                font-size    : 16px;
                padding      : 0 4px;
                margin-bottom: 4px;
                text-shadow  : 0 0 6px rgba(255, 255, 255, 0.8);
            }

            .input {
                height       : 36px;
                border       : 1px solid rgba(0, 0, 0, 0.3);
                outline      : none;
                padding      : 0 6px;
                border-radius: 10px;

                &:focus {
                    border : 1px solid rgba(20, 200, 200, 0.9);
                    outline: none;
                }
            }

            .submit {
                margin-top      : 8px;
                height          : 36px;
                font-size       : 20px;
                border-radius   : 10px;
                color           : #fff;
                background-color: rgba(20, 200, 200, 0.9);
                border          : none;
                transition      : .2s;

                &:hover {
                    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);

                }
            }
        }

        .fn {
            width     : 80%;
            text-align: center;
        }

        @media (max-width:420px) {
            margin: 10px;
            background-color: rgba(255, 255, 255, 0.4);
        }
    }
}